<template>
	<view class="size-box left clearfix">
		<view class="size-title left clearfix">
			{{title}}
		</view>
		<view class="size-item-box left clearfix">
			<view class="size-item left" v-for="(item,index) in data" @click="selectItem(item,index)" :style="currentSelectIndex==index?'border:1px solid #2979ff;background:rgba(209,242,215,.1)':'border:1px solid #ccc;background:#fff'">
				<uni-icons :type="item.icon" :size="item.size" color="#ccc" custom-prefix="iconfont"></uni-icons>
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<style scoped> 
	.size-item{width:80px;text-align:center;line-height:2.2rem;height:2.2rem;cursor:pointer;color:#999;font-size:.9rem;border-radius: 5px;margin-left:10px;margin-right:2px;margin-top:.5rem;margin-bottom:.8rem;font-weight:400;}
	.size-item-box{width:100%;min-height:3rem;margin-top:.5rem;}
	.size-title{width:calc(100% - .5rem);line-height:2rem;font-size:.9rem;color:#333;padding-left:.5rem;}
	.size-box{width:94%;min-height:3rem;margin-left:3%;margin-top:1rem;}
</style>

<script>
	export default {
		name:"my-size",
		data() {
			return {
				currentSelectIndex:0,
			};
		},
		props:['data','currentSelected','title'],
		methods:{
			//选中
			selectItem(item,index){
				this.currentSelectIndex = index;
				this.$emit('selected',item);
			}
		}
	}
</script>
